<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />

    <style>
        html,
        body {
            height: 98%;
            background: transparent;
            -webkit-touch-callout: none;
            font-family: Tahoma, Geneva, sans-serif;
            font-style: normal;
        }

        #dialog {
            background-color: #fff;
            border-radius: .5rem .5rem 0 0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-transition: all .1s;
            transition: all .1s;
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 0;
        }

        #dialog.in {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        .pay-true {
            margin-top: 2rem;
            justify-content: flex-end
        }

        .pay-type-item {
            height: 3.8rem;
        }

        .pay-btn {
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            margin-bottom: .35rem;
            border-radius: 1rem;
            margin-top: .6rem
        }

        .modal-body {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .share-info {
            /*height: 19.05rem;*/
            height: 351px;
            width: 12.15rem;
            display: flex;
            justify-content: center;
            color: #fff;
            position: relative;
        }

        .red-bg img {
            /*height: 19.05rem;*/
            height: 351px;
            width: 12.15rem;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
        }

        .info-content {
            position: absolute;
            top: .97rem;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .white-content {
            width: 11.4rem;
            height: 13rem;
            background: #fff;
            border-radius: 1rem;
            margin: .39rem .39rem .52rem .39rem;
        }

        .white-circle {
            width: 100%;
        }

        .white-circle img {
            height: 2.27rem;
            width: 2.27rem;
            border-radius: 50%;
            background: #fff;
        }

        .goods-item {
            display: inline-block;
            width: 48%;
            margin-bottom: .78rem
        }

        .goods-title {
            -webkit-line-clamp: 2;
        }

        #poster {
            height: 19.05rem;
            width: 12.15rem
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="dialog">
            <div class="modal-head">
                <div class="height-44">
                    保存店铺海报
                </div>
                <img class="close-modal-img" src="../../image/common/guanbi.png" alt="" tapmode onclick="api.closeFrame()">
            </div>
            <div class="modal-body">
                <div class="font-12 text-color-9 height-44" style="text-align:center">将海报分享给好友</div>
                <div class="share-info font-14 text-color-3">
                    <!-- <canvas id="canvas" width="216" height="384"></canvas> -->
                    <div id="poster" class='flex-center'>
                        <div class="red-bg">
                            <img src="../../image/common/share-red-bg.png" alt="" style='margin-bottom:.26rem'>
                        </div>
                        <div class="info-content">
                            <img src="../../image/index/logo1.png" alt="" style="height:1.63rem;width:1.63rem;margin-bottom:.26rem">
                            <div class="font-10">
                                万嘉便利店
                            </div>
                            <div class="font-9" style="margin-top:.13rem">
                                马尾区世创大厦10层
                            </div>
                            <div class='white-content'>

                                <img src="../../image/common/jrbg.png" alt="" style="width:2.6rem;height:.65rem;margin:.65rem auto .78rem 4.3rem">
                                <div class="goods-items" style="padding:0 .39rem">
                                    <div class="goods-item" v-for='item in goods'>
                                        <div class=" flex-align-center" style="height:1.95rem">
                                            <img src="../../image/index/logo1.png" alt="" style="height:1.95rem;width:1.95rem;border-radius:50%;margin-right:.26rem">
                                            <div class="" style="width:calc(100% - 2.21rem)">
                                                <div class="font-8 text-color-3 ellipsis goods-title">
                                                    {{item.title}}
                                                </div>
                                                <div class="money flex" style="align-items: baseline;">
                                                    <div class="font-8 red-text">
                                                        ¥<span class="font-12">{{item.minPrice}}</span>
                                                    </div>
                                                    <div class="font-8 text-color-9">
                                                        ¥<span>{{item.maxPrice}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="white-circle flex-center">
                                    <img src="../../image/index/logo1.png" alt="">
                                </div>
                                <div class="font-10" style=" margin:.26rem 0 .42rem 0;text-align:center">
                                    长按图片识别，更多爆款抢先加购
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <button class='pay-btn red-btn font-16' tapmode @click='canvasImg'>保存图片</button>
                <img id='img' src="" alt="">
            </div>
        </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/Canvas2Image.js"></script>
<script type="text/javascript" src="../../script/zepto.min.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>


<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {

            goods: [{
                title: '111111111111111111',
                minPrice: 10,
                maxPrice: 20
            }, {
                title: '222222222222222222',
                minPrice: 20,
                maxPrice: 30
            }, {
                title: '333333333333333333',
                minPrice: 30,
                maxPrice: 40
            }, {
                title: '4444444444444444444',
                minPrice: 40,
                maxPrice: 50
            }, {
                title: '5555555555555555555555555555',
                minPrice: 50,
                maxPrice: 60
            }, {
                title: '666666666666666666666666666666666666666666666666666666666666',
                minPrice: 60,
                maxPrice: 70
            }, {
                title: '7777777777777777777777777',
                minPrice: 70,
                maxPrice: 80
            }, {
                title: '88888888888888888888888888',
                minPrice: 80,
                maxPrice: 90
            }, ]

        },
        methods: {
            canvasImg: function() {
                var poster = $api.byId('poster');
                var width = $api.offset(poster).w;
                var height = $api.offset(poster).h;
                var scale = 2;
                console.log(width, height)
                html2canvas(document.getElementById("poster"), {
                    dpi: window.devicePixelRatio,
                    scale: scale,
                    width: width,
                    height: height,
                    useCORS: true
                }).then(function(canvas) {
                    console.log(canvas);
                    var dataUrl = canvas.toDataURL("image/png", 1.0);
                    document.getElementById("img").src = dataUrl;
                });
            },
        }
    });
    $api.addCls(dialog, 'in');
    apiready = function() {



    };
</script>


</html>
